import React from 'react'

import { NavBar } from 'antd-mobile'

//只有Route渲染出口直接包裹的组件才具有路由跳转对象
//而NavHeade只是作为路由直接包裹组件的内容所以不具备路由跳转对象
//导入withRouter的高阶组件
import {withRouter} from 'react-router-dom'

//导入props校验包
import PropTypes from 'prop-types'

// import './index.scss'
import styles from './index.module.css'

class NavHeader extends React.Component{
    render(){
        // console.log(this.props);
        const {children,history,onLeftClick,className,rightContent}=this.props
        const defaultHandler=() => history.go(-1)
        return (
            <NavBar
            className={[styles.navBar,className||''].join(' ')}
            mode="light"
            icon={<i className="iconfont icon-back"/>}
            onLeftClick={onLeftClick||defaultHandler}
            rightContent={rightContent}
            >{children}
            </NavBar>
        )
    }
}

//添加props校验
NavHeader.propTypes={
    children: PropTypes.string.isRequired,
    onLeftClick: PropTypes.func,
    className: PropTypes.string,
    rightContent: PropTypes.array
}

// withRouter(NavHeader)方法的返回值也是组件

export default withRouter(NavHeader)